<template>
    <div>
        <el-row class="app-toptool" type="flex">
            <el-col :span="16">
                <Search size="small" :search-visible="searchVisible" :search-data.sync="searchData"
                    :search-form="searchForm" @refesh_list="searchgo" />
            </el-col>
            <el-col :span="8">
        <div class="btn-group" style="margin-bottom:11px;float: right;">
          <div>
            <el-button
              v-if="checkPermission('/technicalDeduction/add')"
              type="primary"
              size="small"
              icon="el-icon-plus"
              @click="add()"
            >添加</el-button>
            <!-- <el-button
              v-if="checkPermission('/technicalcategory/delete')"
              type="primary"
              :disabled="multiple"
              size="small"
              icon="el-icon-delete"
              @click="del(ids)"
            >删除
            </el-button> -->
          </div>
        </div>
      </el-col>
        </el-row>
        <div>
            <el-table ref="multipleTable" v-loading="loading" :row-class-name="rowClass" row-key="id"
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }" :border="false" :stripe="true"
                class="eltable" :data="list" style="width: 100%" @selection-change="selection">
                <el-table-column type="" property="title" label="师傅姓名" />
                <el-table-column type="" property="description" label="扣款原因" show-overflow-tooltip />
                <el-table-column type="" property="income" label="金额" show-overflow-tooltip />
                <el-table-column type="" property="create_time" label="扣款时间" show-overflow-tooltip />
            </el-table>
            <Pagination :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit"
                @pagination="index" />
        </div>
        <Update :technicalList="technicalList" @save="createSuccess" @cancel="isAdd=false" v-if="isAdd" />
        <!-- <Create /> -->
    </div>
</template>
<script>
import Search from '@/components/common/Search'
import Pagination from '@/components/Pagination'
import Update from '@/views/technicalDeduction/update.vue'
// import Create from '@/views/technicalDeduction/create.vue'
import {
  confirm,
  param2Obj
} from '@/utils/common'
export default {
    name: 'TechnicalIndex',
    components: {
        Search,
        Pagination,
        Update,
        // Create,
    },
    data() {
        return {
            isAdd:false,
            dialog: {
                updateDialogStatus: false,
                importDataDialogStatus: false
            },
            ids: [],
            single: true,
            multiple: true,

            list: [],
            RegisterField: [],
            opentype: 'add',
            updateInfo: {},
            loading: false,
            dumpshow: false,
            exceldata: [],
            dumppage: 1,
            percentage: 0,
            ws: {},
            filename: '',
            page_data: {
                limit: 20,
                page: 1,
                total: 20
            },
            searchVisible: true,
            searchForm: [{
                type: 'Input',
                label: '关键词',
                prop: 'keyword',
                width: '230px'
            }],
            searchData: {},
            technicalList:[]
        }
    },

    mounted() {
        this.index()
        this.getTechnicalList()
        console.log('---')
    },
    methods: {
        searchgo() {
            this.page_data.page = 1
            this.index()
        },
        index() {
            const param = {
                path: this.$route.path,
                limit: this.page_data.limit,
                page: this.page_data.page
            }
            Object.assign(param, this.searchData)
            Object.assign(param, param2Obj(this.$route.fullPath))
            this.loading = true

            this.$api.post('/Technicaldeduct/index', param).then(res => {
                this.list = res.data.data
                this.page_data.total = res.data.total
                this.loading = false
                if (this.page_data.page == 1) {
                }
            })
        },
        getTechnicalList(){
            this.loading = true
            this.$api.post('/Technicaldeduct/getInfo').then(res => {
                if(res.errno==0){
                    this.technicalList = res.technical
                }
                this.loading = false
            })
        },
        selection(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length != 1
            this.multiple = !selection.length
        },
        rowClass({
            row,
            rowIndex
        }) {
            for (let i = 0; i < this.ids.length; i++) {
                if (row.id === this.ids[i]) {
                    return 'rowLight'
                }
            }
        },
        add(){
            this.isAdd=true;
        },
        createSuccess(){
            this.isAdd=false;
            this.page_data.page = 1
            this.index()
        }
    }
}
</script>
<style scoped>
.table_list_pic {
    width: 60px;
    vertical-align: middle;
}
</style>